<template>
    <div class="buttons-container">
        <!-- 第一排按钮 -->
        <div class="button-group">
            <Button 
                v-for="(btn, index) in ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']"
                :key="index"
                :text="btn"
                :active="activeButton1 === btn"
                @click="activeButton1 = btn"
            />
        </div>
        
        <!-- 第二排按钮 -->
        <div class="button-group">
            <Button 
                v-for="(btn, index) in ['全部', '内地', '港台', '欧美', '韩国', '日本', '其他']"
                :key="index"
                :text="btn"
                :active="activeButton2 === btn"
                @click="activeButton2 = btn"
            />
        </div>
        
        <!-- 第三排按钮 -->
        <div class="button-group">
            <Button 
                v-for="(btn, index) in ['全部', '男', '女', '组合', '乐队']"
                :key="index"
                :text="btn"
                :active="activeButton3 === btn"
                @click="activeButton3 = btn"
            />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import Button from '@/components/singer/Buttons/Button.vue'

const activeButton1 = ref('全部');
const activeButton2 = ref('全部');
const activeButton3 = ref('全部');
</script>

<style scoped>
.buttons-container {
  padding: 20px;
  margin-left: 80px; /* 左侧留空 */
  max-width: fit-content; /* 确保容器宽度适应内容 */
  background-color: transparent;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  padding: 10px;
  border-radius: 8px;
  background-color: transparent;
  width: 1200px; /* 固定宽度 */
}

.button-group:last-child {
  margin-bottom: 0;
}
</style>